<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <!-- 需要实现深度监听 -->
    <!-- 使用v-for遍历当前页码，然后，通过click事件，确认当前点击
             通过page参数使用watch监听当前页码变化 -->
    <div id="app">
        <p>当前页码{{pageInfo.page}}</p>
        <button v-for="item in 5" @click="pageInfo.page = item">{{item}}</button>
    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    pageInfo:{
                        // page 是当前页
                        page:1
                    }

                };
            },
            watch:{
                pageInfo:{
                    // 深度监听
                    deep:true,
                    // 立即监听
                    // 使用立即监听的话，页面会提前进行渲染
                    immediate:true,

                    handler(newval,oldval){
                        console.log(`监听到的数据${newval.page}`)
                        newval === oldval
                    }
                },
            //如果需要侦听一个对象的属性,则必须书写字符串形式
                'pageInfo.page'(newval){
                    console.log(`监听数据改变${newval}`)
                }
            }
           
        });
    </script>
</body>

</html>